<template>
  <div class="body">
    <div class="body_title">
      <i @click="back" class="el-icon-arrow-left"></i>
      <span>{{ projectInfo.name }}</span>
      <el-tag effect="dark" type="success"
        >{{
          Number($route.query.type) === 1
            ? '检测报告'
            : '复查报告'
        }}
      </el-tag>
      <el-button
        v-show="$route.query.formType !== 'view'"
        @click="submitReport"
        >提交
      </el-button>
    </div>
    <div class="body_main">
      <div class="body_left">
        <el-menu
          ref="menuRef"
          class="el-menu-vertical-demo"
          :unique-opened="false"
          text-color="#4C565C"
          :default-active="activeTree.index"
        >
          <el-menu-item
            :index="leftTreeData[0].index"
            @click="menuClick(leftTreeData[0])"
          >
            <span slot="title">{{
              leftTreeData[0].title
            }}</span>
          </el-menu-item>
          <el-submenu
            v-for="item in leftTreeData.filter((e) => {
              return e.haschild
            })"
            :index="item.index"
            :key="item.index"
          >
            <template slot="title">
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
              v-for="e in item.children"
              :index="e.index"
              :key="e.index"
              @click="menuClick(e)"
            >
              <span slot="title">{{
                e.title.length > 10
                  ? e.title.slice(0, 10) + '...'
                  : e.title
              }}</span>
              <span
                slot="title"
                style="
                  float: right;
                  font-size: 48px;
                  color: #35b8a7;
                "
                v-show="e.isSave"
                >·</span
              >
            </el-menu-item>
          </el-submenu>
          <el-menu-item
            v-for="item in leftTreeData.filter((e) => {
              return !e.haschild
            })"
            :index="item.index"
            :key="item.index"
            v-show="Number(item.index) !== 1"
            @click="menuClick(item)"
          >
            <span slot="title">{{ item.title }}</span>
            <span
              slot="title"
              style="
                float: right;
                font-size: 48px;
                color: #35b8a7;
              "
              v-show="item.isSave"
              >·</span
            >
          </el-menu-item>
        </el-menu>
      </div>
      <div class="body_right">
        <div class="body_right_title">
          <span v-if="!activeTree.pname">{{
            activeTree.title
          }}</span>
          <span v-else>
            {{ activeTree.pname }}
            <span>|</span>
            {{ activeTree.title.slice(3) }}
          </span>
          <el-button
            v-show="
              Number(activeTree.index) !== 5 &&
              Number(activeTree.index) !== 1 &&
              $route.query.formType !== 'view' &&
              Number($route.query.type) === 1
            "
            @click="addForm"
            >新增
          </el-button>
          <el-button
            v-show="
              Number(activeTree.index) !== 1 &&
              Number(activeTree.index) !== 5 &&
              $route.query.formType !== 'view'
            "
            @click="saveReport"
            >保存
          </el-button>
          <el-button
            v-show="
              Number(activeTree.index) === 1 &&
              $route.query.formType !== 'view' &&
              Number($route.query.type) !== 2
            "
            @click="saveProject"
            >保存
          </el-button>
          <el-button
            v-show="Number(activeTree.index) === 5"
            @click="updateTable"
            >更新汇总表
          </el-button>
        </div>
        <div class="body_right_list">
          <div
            class="form_project_problem"
            v-show="
              !activeTree.index ||
              Number(activeTree.index) === 1
            "
          >
            <div class="row">
              <div class="col w2 label">工程名称</div>
              <div class="col w8">
                {{ projectInfo.name }}
              </div>
            </div>
            <div class="row">
              <div class="col w2 label">工程地址</div>
              <div class="col w8">
                <el-input
                  v-model="projectInfo.address"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{
                  projectInfo.address
                }}</span>
              </div>
            </div>
            <div class="row">
              <div class="col w2 label">建设单位</div>
              <div class="col w8">
                <el-input
                  v-model="projectInfo.buildUnit"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{
                  projectInfo.buildUnit
                }}</span>
              </div>
            </div>
            <div class="row">
              <div class="col w2 label">监理单位</div>
              <div class="col w8">
                <el-input
                  v-model="projectInfo.watchUnit"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{
                  projectInfo.watchUnit
                }}</span>
              </div>
            </div>
            <div class="row">
              <div class="col w2 label">施工单位</div>
              <div class="col w8">
                <el-input
                  v-model="projectInfo.workUnit"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{
                  projectInfo.workUnit
                }}</span>
              </div>
            </div>
            <div class="row">
              <div class="col w2 label">工程类型</div>
              <div class="col w3">
                <el-input
                  v-model="projectInfo.type"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{ projectInfo.type }}</span>
              </div>
              <div class="col w2 label">工程规模</div>
              <div class="col w3">
                <el-input
                  v-model="projectInfo.workSize"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{
                  projectInfo.workSize
                }}</span>
              </div>
              <!-- <div class="col w2 label">工程类型</div>
              <div class="col w3">
                <el-input
                  v-model="projectInfo.type"
                  v-if="
                    $route.query.type == 1 &&
                    $route.query.formType != 'view'
                  "
                ></el-input>
                <span v-else>{{ projectInfo.type }}</span>
              </div>
              <div class="col w2 label">工程规模</div>
              </div>

              <div class="col w3">
                  <el-input
                  v-model="projectInfo.workSize"
                  v-if="
                    $route.query.type == 1 &&
                    $route.query.formType != 'view'
                  "
                ></el-input>
                <span v-else>{{ projectInfo.workSize }}</span>
              </div> -->
            </div>
            <div class="row h8">
              <div
                class="col w2 label"
                style="line-height: 20px"
              >
                危险性较大的分部分项工程或超一定规模的危险性较大分部分项工程
              </div>
              <div class="col w8">
                <el-input
                  v-model="projectInfo.scale"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{ projectInfo.scale }}</span>
                <!-- {{ projectInfo.scale }} -->
              </div>
            </div>
            <div class="row">
              <div class="col w2 label">施工进展情况</div>
              <div class="col w8">
                <el-input
                  v-model="projectInfo.progress"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{
                  projectInfo.progress
                }}</span>
                <!-- {{ projectInfo.progress }} -->
              </div>
            </div>
          </div>
          <div
            class="form_project_problem"
            v-show="
              activeTree.index &&
              Number(activeTree.index) !== 1 &&
              Number(activeTree.index) !== 5
            "
            v-for="(item, index) in rightList"
            :key="index"
          >
            <div class="row">
              <div class="col w2 label"></div>
              <div class="col w8 label label-title">
                <span
                  >问题{{ numberToString(index + 1) }}</span
                >
                <el-button
                  v-show="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                  @click="deleteForm(item, index)"
                  >删除
                </el-button>
              </div>
            </div>
            <div class="row">
              <div class="col w2 label">标题</div>
              <div class="col w8">
                <el-input
                  v-model="item.title"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{ item.title }}</span>
              </div>
            </div>
            <div class="row">
              <div class="col w2 label">项目级别</div>
              <div class="col w3">
                <span
                  v-if="
                    $route.query.formType === 'view' ||
                    Number($route.query.type) === 2
                  "
                  >{{ item.projectLevelName }}</span
                >
                <el-select
                  v-model="item.projectLevelId"
                  v-else
                >
                  <el-option
                    :label="item.name"
                    :value="item.pkid"
                    v-for="(item, index) in projectLevel"
                    :key="index"
                  ></el-option>
                </el-select>
                <!-- <span v-else>{{item.projectLevelName}}</span> -->
              </div>
              <div class="col w2 label">隐患等级</div>
              <div class="col w3">
                <span
                  v-if="
                    $route.query.formType === 'view' ||
                    Number($route.query.type) === 2
                  "
                  >{{ item.problemLevelName }}</span
                >
                <el-select
                  v-model="item.problemLevelId"
                  v-else
                >
                  <el-option
                    :label="item.name"
                    :value="item.pkid"
                    v-for="(item, index) in problemLevel"
                    :key="index"
                  ></el-option>
                </el-select>
                <!-- <span v-if="$route.query.formType=='view'||$route.query.type==2">{{item.projectLevelName}}</span> -->
              </div>
            </div>
            <div class="row">
              <div class="col w2 label">问题部位</div>
              <div class="col w3">
                <el-input
                  v-model="item.problemPosition"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{
                  item.problemPosition
                }}</span>
              </div>
              <div class="col w2 label">问题性质</div>
              <div class="col w3">
                <span
                  v-if="
                    $route.query.formType === 'view' ||
                    Number($route.query.type) === 2
                  "
                  >{{ item.problemNatureName }}</span
                >
                <el-select
                  v-model="item.problemNatureId"
                  v-else
                >
                  <el-option
                    :label="item.name"
                    :value="item.pkid"
                    v-for="(item, index) in numLevel"
                    :key="index"
                  ></el-option>
                </el-select>
                <!-- <span v-if="$route.query.formType=='view'||$route.query.type==2">{{item.problemNatureName}}</span> -->
              </div>
            </div>
            <div class="row h81">
              <div class="col w2 label label81">
                问题描述
              </div>
              <div class="col w8">
                <el-input
                  v-model="item.remark"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{ item.remark }}</span>
              </div>
            </div>
            <div class="row h81">
              <div class="col w2 label label81">
                问题描述违反条款
              </div>
              <div class="col w8">
                <el-input
                  v-model="item.violationRegulations"
                  v-if="
                    Number($route.query.type) === 1 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <span v-else>{{
                  item.violationRegulations
                }}</span>
              </div>
            </div>
            <div class="row" style="height: auto">
              <div class="col w2 label label12">
                问题图片
              </div>
              <div
                class="col w8"
                v-show="
                  ($route.query.formType !== 'view' &&
                    Number($route.query.type) === 1) ||
                  item.fileBeforeInfos
                "
              >
                <el-upload
                  :auto-upload="false"
                  accept="image/*"
                  :on-change="
                    (file, fileList) =>
                      uploadFilesChange(
                        file,
                        fileList,
                        item
                      )
                  "
                  :before-upload="
                    (file) => {
                      beforeUpload(file, item, '0')
                    }
                  "
                  :before-remove="
                    (file, filelist) => {
                      return beforeRemove(
                        file,
                        filelist,
                        item
                      )
                    }
                  "
                  class="avatar-uploader"
                  list-type="picture-card"
                  action=""
                  :file-list="item.fileBeforeInfos || []"
                  :disabled="
                    $route.query.formType === 'view' ||
                    Number($route.query.type) === 2
                  "
                >
                  <!-- :file-list="" -->
                  <i
                    class="el-icon-plus avatar-uploader-icon"
                  ></i>
                </el-upload>
                <!-- <div v-else></div> -->
              </div>
            </div>
            <div
              class="row h81"
              v-show="Number($route.query.type) === 2"
            >
              <div class="col w2 label label81">
                整改措施
              </div>
              <div class="col w8">
                <el-input
                  v-model="item.reformMeasure"
                  v-if="
                    Number($route.query.type) === 2 &&
                    $route.query.formType !== 'view'
                  "
                ></el-input>
                <!-- type="textarea" -->
                <span v-else>{{ item.reformMeasure }}</span>
              </div>
            </div>
            <div
              class="row"
              v-show="Number($route.query.type) === 2"
              style="height: auto"
            >
              <div class="col w2 label label12">
                整改图片
              </div>
              <div
                class="col w8"
                v-show="
                  $route.query.formType !== 'view' ||
                  item.fileCheckInfos
                "
              >
                <el-upload
                  :auto-upload="false"
                  accept="image/*"
                  :on-change="
                    (file, fileList) =>
                      uploadFilesChange(
                        file,
                        fileList,
                        item
                      )
                  "
                  :disabled="
                    $route.query.formType === 'view'
                  "
                  class="avatar-uploader"
                  list-type="picture-card"
                  action=""
                  :file-list="item.fileCheckInfos || []"
                  :before-upload="
                    (file) => {
                      beforeUpload(file, item, '1')
                    }
                  "
                  :before-remove="
                    (file, filelist) => {
                      return beforeRemove(
                        file,
                        filelist,
                        item
                      )
                    }
                  "
                >
                  <i
                    class="el-icon-plus avatar-uploader-icon"
                  ></i>
                </el-upload>
                <!-- <div v-else></div> -->
              </div>
            </div>
          </div>
          <el-table
            v-show="Number(activeTree.index) === 5"
            :data="tableData"
            height="100%"
            :header-cell-style="{
              background: '#F2F6FB ',
              color: ' #6B767D'
            }"
            :row-class-name="tableRowClassName"
            :span-method="arraySpanMethod"
            style="width: 100%"
          >
            <el-table-column
              label="安全管理汇总表"
              align="center"
            >
              <el-table-column
                label="检查分项"
                align="center"
                prop="type"
              >
                <template slot-scope="scope">
                  <span>{{
                    getTypeName(scope.row.type)
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="检查部位"
                align="center"
                prop="problemPosition"
              >
              </el-table-column>
              <el-table-column
                label="检查问题"
                align="center"
                prop="remark"
              >
              </el-table-column>
              <el-table-column
                label="隐患等级"
                align="center"
                prop="problemLevelId"
              >
                <template slot-scope="scope">
                  <span>{{
                    getProblemName(scope.row.problemLevelId)
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  securityAdd,
  securityDelete,
  securityFileAdd,
  securityFileDelete,
  securityFileDownload,
  securityFileUpload,
  securityProjectQuery,
  securityQuery,
  securityQueryAllProblem,
  securitySaveOrUpdate,
  securitySubmit,
  securityType,
  securityUpdate
} from '@/api/wisdomBuild'
import { cloneDeep } from 'lodash'

export default {
  name: 'form',
  components: {},
  data() {
    return {
      leftTreeData: [
        { index: '1', title: '工程概况', haschild: false },
        {
          index: '2',
          title: '安全问题',
          haschild: true,
          children: [
            {
              index: '11',
              title: '(一）文明施工',
              pname: '安全问题',
              isSave: false
            },
            {
              index: '12',
              title: '(二）施工用电',
              pname: '安全问题',
              isSave: false
            },
            {
              index: '13',
              title: '(三）施工机具',
              pname: '安全问题',
              isSave: false
            },
            {
              index: '14',
              title: '(四）高处作业',
              pname: '安全问题',
              isSave: false
            },
            {
              index: '15',
              title: '(五）基坑工程',
              pname: '安全问题',
              isSave: false
            },
            {
              index: '16',
              title: '(六）扣件式模板支架',
              pname: '安全问题',
              isSave: false
            },
            {
              index: '17',
              title: '(七）轮扣式模板支架',
              pname: '安全问题',
              isSave: false
            },
            {
              index: '18',
              title:
                '(八）落地式扣件钢管脚手架（双排、满堂）',
              pname: '安全问题',
              isSave: false
            },
            {
              index: '19',
              title: '(九）临时消防',
              pname: '安全问题',
              isSave: false
            }
          ]
        },
        {
          index: '3',
          title: '管理行为问题',
          haschild: true,
          children: [
            {
              index: '21',
              title: '(一）施工用电',
              pname: '管理行为问题',
              isSave: false
            },
            {
              index: '22',
              title: '(二）基坑工程',
              pname: '管理行为问题',
              isSave: false
            },
            {
              index: '23',
              title: '(三）扣件式模板支架',
              pname: '管理行为问题',
              isSave: false
            }
          ]
        },
        {
          index: '31',
          title: '设备检查问题',
          haschild: false,
          isSave: false
        },
        {
          index: '5',
          title: '问题汇总表',
          haschild: false,
          isSave: false
        }
      ],
      activeTree: {},
      // originProjectInfo: {},
      projectInfo: {},
      tableData: [],
      projectLevel: [],
      problemLevel: [],
      numLevel: [],
      // originRightList: [],
      rightList: [],
      form: {
        title: '',
        projectId: '',
        type: '',
        projectLevelId: '',
        problemLevelId: '',
        problemPosition: '',
        problemNatureId: '',
        remark: '',
        violationRegulations: '',
        status: 0,
        reformMeasure: '',
        fileCheckIds: [],
        fileBeforeIds: [],
        fileBeforeInfos: [],
        fileCheckInfos: [],
        checkStatus: 0,
        loading: ''
      },
      originReportData: {}
    }
  },
  mounted() {
    this.form.checkStatus =
      Number(this.$route.query.type) === 1 ? 0 : 1
    this.activeTree = this.leftTreeData[0]
    this.projectInfo = JSON.parse(this.$route.query.data)
    this.projectInfo.projectId = this.projectInfo.pkid
    delete this.projectInfo.pkid
    // this.originProjectInfo = cloneDeep(this.projectInfo)
    this.getSelctList('securityNatureInfo')
    this.getSelctList('securityProblemLevelInfo')
    this.getSelctList('securityProjectLevelInfo')
    this.getProblemList()
    // if (
    //   this.$route.query.formType != 'add' ||
    //   this.$route.query.type == 2
    // ) {
    //   this.getProblemList()
    // }
    this.getProjectInfo()
  },
  methods: {
    back() {
      this.$router.push('/wisdomBuild/checkOrg')
    },
    menuClick(data) {
      if (
        this.activeTree &&
        this.activeTree.index === data.index
      ) {
        return
      }
      this.handleMenuClick(data)
      // if (Number(this.activeTree.index) === 1) {
      //   if (
      //     !isEqual(this.originProjectInfo, this.projectInfo)
      //   ) {
      //     this.$confirm(
      //       '此页面有未保存的数据，离开此页面将丢失未保存的部分，是否继续?',
      //       '提示',
      //       {
      //         confirmButtonText: '确定',
      //         cancelButtonText: '取消',
      //         type: 'warning'
      //       }
      //     )
      //       .then(() => {
      //         this.projectInfo = cloneDeep(
      //           this.originProjectInfo
      //         )
      //         this.handleMenuClick(data)
      //       })
      //       .catch(() => {
      //         this.$refs.menuRef.$data.activeIndex =
      //           this.activeTree.index
      //         this.$forceUpdate()
      //       })
      //   } else {
      //     this.handleMenuClick(data)
      //   }
      // } else if (Number(this.activeTree.index) !== 5) {
      //   if (
      //     !isEqual(this.originRightList, this.rightList)
      //   ) {
      //     this.$confirm(
      //       '此页面有未保存的数据，离开此页面将丢失未保存的部分，是否继续?',
      //       '提示',
      //       {
      //         confirmButtonText: '确定',
      //         cancelButtonText: '取消',
      //         type: 'warning'
      //       }
      //     )
      //       .then(() => {
      //         this.rightList = cloneDeep(
      //           this.originRightList
      //         )
      //         this.handleMenuClick(data)
      //       })
      //       .catch(() => {
      //         this.$refs.menuRef.$data.activeIndex =
      //           this.activeTree.index
      //         this.$forceUpdate()
      //       })
      //   } else {
      //     this.handleMenuClick(data)
      //   }
      // } else {
      //   this.handleMenuClick(data)
      // }
      // if(this.$route.query.formType=='add'){
      //     this.form.type=data.index
      //     this.form.projectId=this.projectInfo.pkid
      //     let item=JSON.parse(JSON.stringify(this.form))
      //     this.rightList.push(item)
      // }else{
      //     this.getReportInfo()
      // }
    },
    handleMenuClick(data) {
      this.activeTree = data
      if (
        Number(data.index) !== 5 &&
        Number(data.index) !== 1
      ) {
        // this.originRightList = []
        this.rightList = []
        this.form.type = data.index
        this.form.projectId = this.projectInfo.projectId
        this.getReportInfo()
      } else if (Number(data.index) === 5) {
        this.getProblemList()
        // this.updateTable()
      } else if (Number(data.index) === 1) {
        this.getProjectInfo()
      }
    },
    saveProject() {
      if (this.projectInfo.pkid) {
        const params = cloneDeep(this.originReportData)
        params.handleStatus = 0
        params.reportStatus =
          Number(this.$route.query.type) === 1 ? 0 : 1
        console.log('编辑工程概况', params)
        securitySaveOrUpdate(params).then((res) => {
          console.log('res', res)
          if (res.success) {
            this.$message.success('保存成功')
            this.getProjectInfo()
          } else {
            this.$message.error(res.message || '保存失败')
          }
        })
      } else {
        const params = cloneDeep(this.originReportData)
        params.handleStatus = 0
        params.reportStatus =
          Number(this.$route.query.type) === 1 ? 0 : 1
        params.securityProjectInfo = this.projectInfo
        console.log('新增工程概况', params)
        securitySaveOrUpdate(params).then((res) => {
          console.log('res', res)
          if (res.success) {
            this.$message.success('保存成功')
            this.getProjectInfo()
          } else {
            this.$message.error(res.message || '保存失败')
          }
        })
      }
    },
    getProjectInfo() {
      securityProjectQuery({
        projectId: this.projectInfo.projectId
      }).then((res) => {
        if (res.success && res.data) {
          this.originReportData.securityProjectInfo =
            res.data
          this.projectInfo = res.data
          // this.originProjectInfo = cloneDeep(
          //   this.projectInfo
          // )
        }
      })
    },
    addForm() {
      const item = JSON.parse(JSON.stringify(this.form))
      this.rightList.push(item)
    },
    reportSubmit() {
      // const params = cloneDeep(this.originReportData)
      // params.handleStatus = 1
      // params.reportStatus =
      //   Number(this.$route.query.type) === 1 ? 0 : 1
      // console.log('提交报告', params)
      // securitySaveOrUpdate(params).then((res) => {
      //   console.log('res', res)
      //   if (res.success) {
      //     this.$message.success('提交成功')
      //     this.back()
      //   } else {
      //     this.$message.error(res.message || '提交失败')
      //   }
      // })
      securitySubmit({
        projectId: this.projectInfo.projectId,
        type: this.$route.query.type
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.data)
          this.back()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    deleteForm(data, e) {
      if (!data.pkid) {
        this.rightList.splice(e, 1)
      } else {
        this.$confirm(
          '此操作将永久删除该问题，是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          securityDelete(data.pkid).then((res) => {
            if (res.success) {
              this.getProblemList()
              this.$nextTick(() => {
                this.getReportInfo()
              })
              this.$message.success(res.data)
            } else {
              this.$message.error(res.message)
            }
          })
        })
      }
    },
    getProblemName(e) {
      const find = this.problemLevel.find((item) => {
        return item.pkid === e
      })
      if (find) {
        return find.name
      } else {
        return ''
      }
    },
    getTypeName(e) {
      let find
      if (e > 10 && e < 20) {
        find = this.leftTreeData[1].children.find(
          (item) => {
            return Number(item.index) === Number(e)
          }
        )
        return find.pname + '/' + find.title.slice(3)
      } else if (e > 20 && e < 30) {
        find = this.leftTreeData[2].children.find(
          (item) => {
            return Number(item.index) === Number(e)
          }
        )
        return find.pname + '/' + find.title.slice(3)
      } else {
        return '设备检查问题'
      }
    },
    setSave(e) {
      let find
      if (e > 10 && e < 20) {
        find = this.leftTreeData[1].children.find(
          (item) => {
            return Number(item.index) === Number(e)
          }
        )
        find.isSave = true
      } else if (e > 20 && e < 30) {
        find = this.leftTreeData[2].children.find(
          (item) => {
            return Number(item.index) === Number(e)
          }
        )
        find.isSave = true
      } else {
        this.leftTreeData[3].isSave = true
      }
    },
    getReportInfo() {
      const data = {
        projectId: this.projectInfo.projectId,
        type: this.activeTree.index,
        checkStatus:
          Number(this.$route.query.type) === 1 ? 0 : 1,
        isCheckAdd: 0
      }
      if (
        Number(this.$route.query.type) === 2 &&
        !this.$route.query.id
      ) {
        data.isCheckAdd = 1
      } else {
        data.isCheckAdd = 0
      }
      securityQuery(data).then((res) => {
        if (res.success) {
          console.log(
            'originReportData.securityProblemInfoList',
            this.originReportData.securityProblemInfoList
          )
          res.data.forEach((item) => {
            const find =
              this.originReportData.securityProblemInfoList.find(
                (temp) =>
                  temp.pkid === item.pkid ||
                  (temp.title === item.title &&
                    temp.createTime === item.createTime)
              )
            if (find) {
              if (Number(this.$route.query.type) === 1) {
                find.fileBeforeIds = item.fileBeforeIds
                find.fileBeforeInfos = item.fileBeforeInfos
              } else {
                find.fileBeforeIds = item.fileBeforeIds
                find.fileBeforeInfos = item.fileBeforeInfos
                find.fileCheckIds = item.fileCheckIds
                find.fileCheckInfos = item.fileCheckInfos
                find.reformMeasure = item.reformMeasure
              }
            }
          })
          this.rightList = res.data
          if (!this.rightList.length) {
            if (
              Number(this.$route.query.type) === 1 &&
              this.$route.query.formType !== 'view'
            ) {
              const item = JSON.parse(
                JSON.stringify(this.form)
              )
              this.rightList.push(item)
            } else {
              if (this.$route.query.formType !== 'view') {
                this.$message.error(
                  '该项目此问题类型下暂无检测问题'
                )
              }
            }
          } else {
            // if(this.$route.query.type==1){
            this.rightList.map(async (item) => {
              if (
                item.fileBeforeInfos &&
                item.fileBeforeInfos.length
              ) {
                for (const e of item.fileBeforeInfos) {
                  await this.downfile(e)
                }
              }
              //   if (this.$route.query.type == 2) {
              if (
                item.fileCheckInfos &&
                item.fileCheckInfos.length
              ) {
                for (const e of item.fileCheckInfos) {
                  await this.downfile(e)
                }
              }
              //   }
              return item
            })
            // }
            // if (this.$route.query.type == 2) {
            //   this.rightList.map(async (item) => {
            //     if (
            //       item.fileCheckInfos &&
            //       item.fileCheckInfos.length
            //     ) {
            //       for (const e of item.fileBeforeInfos) {
            //         await this.downfile(e)
            //       }
            //     }
            //     return item
            //   })
            // }
          }
          // this.originRightList = cloneDeep(this.rightList)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getProblemList() {
      securityQueryAllProblem({
        projectId: this.projectInfo.projectId,
        checkStatus:
          Number(this.$route.query.type) === 1 ? 0 : 1
      }).then((res) => {
        if (res.success) {
          this.originReportData.securityProblemInfoList =
            res.data || []
          this.tableData = res.data || []
          const list = res.data || []
          this.setrowspans(this.tableData, 'type')
          //   if (
          //     this.$route.query.formType != 'add' ||
          //         this.$route.query.type == 2
          //   ) {
          list.map((item) => {
            this.setSave(item.type)
          })
          //   }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    submitReport() {
      this.$confirm('请确保报告内容已保存？', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.reportSubmit()
        // securityProjectQuery({
        //   projectId: this.projectInfo.projectId
        // }).then((res) => {
        //   console.log(res)
        //   if (res.success) {
        //     if (res.data && res.data.pkid) {
        //       securityQueryAllProblem({
        //         projectId: this.projectInfo.projectId,
        //         checkStatus:
        //           Number(this.$route.query.type) === 1
        //             ? 0
        //             : 1
        //       }).then((res) => {
        //         if (res.success && res.data) {
        //           if (res.data.length) {
        //             this.reportSubmit()
        //           } else {
        //             this.$message.error('请先保存问题数据')
        //           }
        //         }
        //       })
        //     } else {
        //       this.$message.error('请先保存工程概况信息')
        //     }
        //   }
        // })
      })
    },
    async saveReport() {
      const params = cloneDeep(this.originReportData)
      params.handleStatus = 0
      params.reportStatus =
        Number(this.$route.query.type) === 1 ? 0 : 1
      if (Number(this.$route.query.type) === 1) {
        const rightData = cloneDeep(this.rightList)
        console.log('rightData', rightData)
        params.securityProblemInfoList =
          params.securityProblemInfoList.filter(
            (item) =>
              item.type !== Number(this.activeTree.index)
          )
        params.securityProblemInfoList.push(...rightData)

        this.loading = this.$loading({
          lock: true,
          text: '正在保存',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        for await (const question of rightData) {
          console.log('question', question)
          if (question.fileBeforeInfos) {
            for await (const picture of question.fileBeforeInfos) {
              console.log('上传', picture)
              if (!picture.pkid) {
                const data = new FormData()
                data.append(
                  'file',
                  picture.raw,
                  picture.name
                )
                const filePkid = await this.uploadFile(data)
                console.log(
                  '上传完成',
                  picture,
                  'pkid:',
                  filePkid
                )
                question.fileBeforeIds =
                  question.fileBeforeIds || []
                question.fileBeforeIds.push(filePkid)
              }
            }
          }
        }

        securitySaveOrUpdate(params)
          .then((res) => {
            console.log('res', res)
            this.loading.close()
            if (res.success) {
              this.$message.success('保存成功')
              this.getProblemList()
              this.$nextTick(() => {
                this.getReportInfo()
              })
            } else {
              this.$message.error(res.message || '保存失败')
            }
          })
          .catch(() => {
            this.loading.close()
            this.$message.error('保存失败')
          })
      } else {
        // TODO: 复查报告
        const rightData = cloneDeep(this.rightList)
        console.log('rightData', rightData)
        params.securityProblemInfoList =
          params.securityProblemInfoList.filter(
            (item) =>
              item.type !== Number(this.activeTree.index)
          )
        params.securityProblemInfoList.push(...rightData)

        this.loading = this.$loading({
          lock: true,
          text: '正在保存',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        for await (const question of rightData) {
          console.log('question', question)
          if (question.fileCheckInfos) {
            for await (const picture of question.fileCheckInfos) {
              console.log('上传', picture)
              if (!picture.pkid) {
                const data = new FormData()
                data.append(
                  'file',
                  picture.raw,
                  picture.name
                )
                const filePkid = await this.uploadFile(data)
                console.log(
                  '上传完成',
                  picture,
                  'pkid:',
                  filePkid
                )
                question.fileCheckIds =
                  question.fileCheckIds || []
                question.fileCheckIds.push(filePkid)
              }
            }
          }
        }
        console.log('保存复查报告', params)

        securitySaveOrUpdate(params)
          .then((res) => {
            console.log('res', res)
            this.loading.close()
            if (res.success) {
              this.$message.success('保存成功')
              this.getProblemList()
              this.$nextTick(() => {
                this.getReportInfo()
              })
            } else {
              this.$message.error(res.message || '保存失败')
            }
          })
          .catch(() => {
            this.loading.close()
            this.$message.error('保存失败')
          })
      }
      return
      // if (this.$route.query.id) {
      //   this.rightList = this.rightList.map((item) => {
      //     item.refId = this.$route.query.id
      //     return item
      //   })
      // }
      // if (Number(this.$route.query.type) === 1) {
      //   this.rightList = this.rightList.map((item) => {
      //     delete item.reformMeasure
      //     delete item.fileCheckIds
      //     return item
      //   })
      // }
      if (
        this.$route.query.formType === 'add' &&
        Number(this.$route.query.type) === 1
      ) {
        this.rightList = this.rightList.map((item) => {
          item.checkStatus =
            Number(this.$route.query.type) === 1 ? 0 : 1
          return item
        })
        const list = this.rightList.filter((item) => {
          return !item.pkid
        })
        const list1 = this.rightList.filter((item) => {
          return item.pkid
        })
        if (list.length) {
          this.loading = this.$loading({
            lock: true,
            text: '正在新增',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          securityAdd(list).then((res) => {
            if (res.success) {
              this.setSave(this.activeTree.index)
              this.$message.success(res.data)
              this.loading.close()
              this.getReportInfo()
            } else {
              this.loading.close()
              this.$message.error(res.message)
            }
          })
        }
        if (list1.length) {
          securityUpdate(list1).then((res) => {
            if (res.success) {
              this.setSave(this.activeTree.index)
              this.$message.success(res.data)
              this.getReportInfo()
            }
          })
        }
      } else {
        if (Number(this.$route.query.type) === 1) {
          this.rightList = this.rightList.map((item) => {
            delete item.reformMeasure
            return item
          })
        } else {
          this.rightList = this.rightList.map((item) => {
            item.checkStatus = 1
            return item
          })
        }
        const list = this.rightList.filter((item) => {
          return !item.pkid
        })
        const list1 = this.rightList.filter((item) => {
          return item.pkid
        })
        if (list.length) {
          this.loading = this.$loading({
            lock: true,
            text: '正在新增',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          securityAdd(list).then((res) => {
            if (res.success) {
              this.setSave(this.activeTree.index)
              this.$message.success(res.data)
              this.loading.close()
              this.getReportInfo()
            } else {
              this.loading.close()
              this.$message.error(res.message)
            }
          })
        }
        if (list1.length) {
          securityUpdate(list1).then((res) => {
            if (res.success) {
              this.setSave(this.activeTree.index)
              this.$message.success(res.data)
              this.getReportInfo()
            }
          })
        }
        //  if(this.$route.query.type==2){
        //      this.rightList=this.rightList.map(item=>{})
        //  }
        // securityUpdate(
        //   this.rightList.filter((item) => {
        //     return item.pkid
        //   })
        // ).then((res) => {
        //   if (res.success) {
        //     this.$message.success(res.data)
        //     if (this.$route.query.type == 2) {
        //       this.getProblemList()
        //     }
        //     let list = this.rightList.filter((item) => {
        //       return !item.pkid
        //     })
        //     list = list.map((item) => {
        //       item.refId = this.$route.query.id
        //       item.checkStatus =
        //         this.$route.query.type == 1 ? 0 : 1
        //       return item
        //     })
        //     if (list.length) {
        //       securityAdd(list).then((res) => {
        //         if (res.success) {
        //           this.getReportInfo()
        //         }
        //       })
        //     } else {
        //       this.getReportInfo()
        //     }
        //   } else {
        //     this.$message.error(res.message)
        //   }
        // })
      }
    },
    updateTable() {
      this.getProblemList()
    },
    getSelctList(type) {
      securityType(type).then((res) => {
        if (res.success) {
          if (type === 'securityNatureInfo') {
            this.numLevel = res.data
          } else if (type === 'securityProblemLevelInfo') {
            this.problemLevel = res.data
          } else if (type === 'securityProjectLevelInfo') {
            this.projectLevel = res.data
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 将返回的流数据转换为url
    getObjectURL(file) {
      let url = null
      if (window.createObjectURL !== undefined) {
        // basic
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(file)
        } catch (error) {}
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file)
        } catch (error) {}
      }
      return url
    },
    deleteFile(id) {
      securityFileDelete(id).then((res) => {
        if (res.success) {
          this.$message.success('删除成功')
          this.getReportInfo()
        } else {
          this.$message.error(res.message || '删除失败')
        }
      })
    },
    beforeRemove(file, filelist, data) {
      console.log(file, filelist, data)
      if (Number(this.$route.query.type) === 1) {
        console.log('fileBeforeInfos', data.fileBeforeInfos)
        if (file.pkid) {
          console.log('删除已上传文件')
          this.$confirm(
            '此操作将删除该图片，是否继续?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          )
            .then(() => {
              this.deleteFile(file.pkid)
            })
            .catch(() => {
              console.log('cancel delete picture')
            })
        } else {
          const index = data.fileBeforeInfos.findIndex(
            (item) => item.raw === file.raw
          )
          if (index !== -1) {
            data.fileBeforeInfos.splice(index, 1)
            console.log('删除未上传文件')
            return true
          }
        }
      } else {
        console.log('fileCheckInfos', data.fileCheckInfos)
        if (file.pkid) {
          console.log('删除已上传文件')
          this.$confirm(
            '此操作将删除该图片，是否继续?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          )
            .then(() => {
              this.deleteFile(file.pkid)
            })
            .catch(() => {
              console.log('cancel delete picture')
            })
        } else {
          const index = data.fileCheckInfos.findIndex(
            (item) => item.raw === file.raw
          )
          if (index !== -1) {
            data.fileCheckInfos.splice(index, 1)
            console.log('删除未上传文件')
            return true
          }
        }
      }
      return false
      // let index
      // if (!data.pkid) {
      //   if (Number(this.$route.query.type) === 1) {
      //     index = data.fileBeforeIds.indexOf(file.fileId)
      //     if (index !== -1) {
      //       data.fileBeforeIds.splice(index, 1)
      //     }
      //   } else {
      //     index = data.fileCheckIds.indexOf(file.fileId)
      //     if (index !== -1) {
      //       data.fileCheckIds.splice(index, 1)
      //     }
      //   }
      //   // var index= this.form.fileIds.indexOf(file.fileId)
      //   // if(index!=-1){
      //   //   this.form.fileIds.splice(index,1)
      //   // }
      //   this.deleteFile(file.fileId)
      // } else {
      //   if (file.fileId) {
      //     this.deleteFile(file.fileId)
      //   } else if (file.pkid) {
      //     this.deleteFile(file.pkid)
      //   }
      // }
    },
    async uploadFile(data, fileName) {
      let filePkid = ''
      await securityFileUpload(data)
        .then((res) => {
          console.log('upload res', res)
          if (res.success) {
            filePkid = res.data
          } else {
            this.$message.error(`上传${fileName}失败`)
          }
        })
        .catch(() => {
          this.$message.error(`上传${fileName}失败`)
        })
      return filePkid
    },
    beforeUpload(file, data, type) {
      console.log(file.name)
      // debugger
      // if (file.size / (1024 * 1024) > 10) {
      //   // 限制文件大小
      //   this.$message.warning('当前限制文件大小不能大于10M')
      //   return false
      // }
      const suffix = this.getFileType(file.name) // 获取文件后缀名
      console.log(suffix)
      const suffixArray = ['png', 'jpg', 'jpeg'] // 限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix) === -1) {
        this.$message({
          message: '文件格式错误,只支持jpg/png图片文件',
          type: 'error',
          duration: 2000
        })
        return
      }
      // const param = new FormData()
      // param.append('file', file)
      let imageUrl = ''
      // var event = event || window.event;
      // var file0 = event.target.files[0];
      // var file = event.target.files[0];
      const reader = new FileReader()
      // 转base64
      reader.onload = (e) => {
        imageUrl = e.target.result // 将图片路径赋值给src
        if (type !== '1') {
          data.fileBeforeInfos = data.fileBeforeInfos || []
          data.fileBeforeInfos.push({
            imageUrl: imageUrl,
            file: file
          })
        } else {
          data.fileCheckInfos = data.fileCheckInfos || []
          data.fileCheckInfos.push({
            imageUrl: imageUrl,
            file: file
          })
        }
      }
      reader.readAsDataURL(file)

      // if (!data.pkid) {
      //   securityFileUpload(param).then((res) => {
      //     if (res.success) {
      //       file.fileId = res.data
      //       if (type === '1') {
      //         // data.fileCheckIds=data.fileCheckIds||[]
      //         // data.fileCheckInfos=data.fileCheckInfos||[]
      //         data.fileCheckIds.push(res.data)
      //         data.fileCheckInfos.push({
      //           url: imageUrl,
      //           ...file
      //         })
      //       } else {
      //         // data.fileBeforeIds=data.fileCheckIds||[]
      //         // data.fileBeforeInfos=data.fileCheckIds||[]
      //         data.fileBeforeIds.push(res.data)
      //         data.fileBeforeInfos.push({
      //           url: imageUrl,
      //           ...file
      //         })
      //       }
      //     } else {
      //       this.$message.error(res.message)
      //     }
      //   })
      // } else {
      //   securityFileUpload(param).then((res) => {
      //     if (res.success) {
      //       file.fileId = res.data
      //       if (type === '1') {
      //         data.fileCheckInfos =
      //           data.fileCheckInfos || []
      //         // data.fileCheckIds.push(res.data)
      //         data.fileCheckInfos.push({
      //           url: imageUrl,
      //           ...file
      //         })
      //       } else {
      //         data.fileBeforeInfos = data.fileCheckIds || []
      //         //   data.fileBeforeIds.push(res.data)
      //         data.fileBeforeInfos.push({
      //           url: imageUrl,
      //           ...file
      //         })
      //       }
      //       securityFileAdd({
      //         problemId: data.pkid,
      //         fileId: res.data,
      //         type: type
      //       }).then((res) => {
      //         if (res.success) {
      //           this.$message.success('问题新增附件成功')
      //           this.getReportInfo()
      //         } else {
      //           this.$message.error(res.message)
      //         }
      //       })
      //     } else {
      //       this.$message.error(res.message)
      //     }
      //   })
      // }
    },
    uploadFilesChange(file, fileList, item) {
      console.log('file', file)
      console.log('fileList', fileList)
      console.log('type', this.$route.query.type) // 1: 检测报告, 2: 复查报告
      if (Number(this.$route.query.type) === 1) {
        item.fileBeforeInfos = item.fileBeforeInfos || []
        item.fileBeforeInfos.push({
          ...file
        })
        item.fileBeforeInfos.forEach((temp) => {
          if (temp.raw && !temp.imageUrl) {
            const reader = new FileReader()
            // 转base64
            reader.onload = (e) => {
              // 将图片路径赋值给src
              temp.imageUrl = e.target.result
            }
            reader.readAsDataURL(temp.raw)
          }
        })
        console.log('fileBeforeInfos', item.fileBeforeInfos)
      } else {
        item.fileCheckInfos = item.fileCheckInfos || []
        item.fileCheckInfos.push({
          ...file
        })
        item.fileCheckInfos.forEach((temp) => {
          if (temp.raw && !temp.imageUrl) {
            const reader = new FileReader()
            // 转base64
            reader.onload = (e) => {
              // 将图片路径赋值给src
              temp.imageUrl = e.target.result
            }
            reader.readAsDataURL(temp.raw)
          }
        })
        console.log('fileCheckInfos', item.fileCheckInfos)
      }
    },
    getFileType(name) {
      const startIndex = name.lastIndexOf('.')
      if (startIndex !== -1) {
        return name.slice(startIndex + 1).toLowerCase()
      } else {
        return ''
      }
    },
    // console.log(this.numberToString('21')) console.log(this.numberToString(21))
    numberToString(number) {
      number = number.toString()
      if (number.match(/\D/) || number.length >= 14) return
      const zhArray = [
        '零',
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十'
      ] // 数字对应中文
      const baseArray = [
        '',
        '十',
        '百',
        '千',
        '万',
        '十',
        '百',
        '千',
        '亿',
        '十',
        '百',
        '千',
        '万'
      ] // 进位填充字符，第一位是 个位，可省略
      let string = String(number)
        .split('')
        .reverse()
        .map((item, index) => {
          // 把数字切割成数组并倒序排列，然后进行遍历转成中文
          // 如果当前位为0，直接输出数字， 否则输出 数字 + 进位填充字符
          item =
            Number(item) === 0
              ? zhArray[Number(item)]
              : zhArray[Number(item)] + baseArray[index]
          return item
        })
        .reverse()
        .join('') // 倒叙回来数组，拼接成字符串
      string = string.replace(/^一十/, '十') // 如果以 一十 开头，可省略一
      string = string.replace(/零+/, '零') // 如果有多位相邻的零，只写一个即可
      return string
    },
    // tanble row
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    },
    // 合并相同的采购订单编号行，如果返回[0,1]则表示改行也被合并了
    arraySpanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      if (Number(columnIndex) === 0) {
        return {
          rowspan: row.rowspan,
          colspan: row.rowspan > 0 ? 1 : 0
        }
      }
    },
    // 计算每行数据需要合并的行rowspan，在表格数据更新后进行调用
    setrowspans(list, key) {
      list.forEach((v) => {
        v.rowspan = 1
      })
      // 双层循环
      for (let i = 0; i < list.length; i++) {
        /**
         * 内层循环，上面已经给所有的行都加了v.rowspan = 1
         * 如果当前行的processBatchNum和下一行的processBatchNum相等
         * 就把当前v.rowspan + 1
         * 下一行的v.rowspan - 1
         */
        for (let j = i + 1; j < list.length; j++) {
          // 此处可根据相同字段进行合并，此处是根据的processBatchNum，实际情况根据业务需要修改
          if (list[i][key] === list[j][key]) {
            list[i].rowspan++
            list[j].rowspan--
          } else {
            break
          }
        }
        // 这里跳过已经合并的行数据，从下一次需要合并的行开始
        i = i + list[i].rowspan - 1
      }
    },

    async downfile(e) {
      await securityFileDownload(e.pkid)
        .then(async (res) => {
          const reader = new FileReader()
          reader.readAsDataURL(res)
          reader.onloadend = () => {
            e.url = reader.result
            this.$forceUpdate()
          }
        })
        .catch((err) => {
          console.error(err)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  width: 100%;
  height: calc(100vh - 60px);
  //   padding: 16px 30px;
  background-color: #f4f8fe;

  &_title {
    height: 60px;
    width: 100%;
    background-color: #fff;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #4c565c;
    line-height: 60px;
    padding-left: 164px;
    padding-right: 164px;

    i {
      cursor: pointer;
    }

    span {
      margin-right: 10px;
      margin-left: 10px;
    }

    ::v-deep {
      .el-button {
        background: #497fa3 !important;
        color: white !important;
        border: none !important;
        border-radius: 2px;
        float: right;
        margin-top: 10px;
        padding: 11px 26px;
      }
    }
  }

  &_main {
    width: calc(100% - 328px);
    height: calc(100% - 120px);
    background: white;
    margin: 30px 164px;
    // padding: 15px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    border-radius: 2px;

    .body_left {
      width: 20%;
      height: 100%;
      background: #ffffff;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      padding: 20px 0;
      overflow: auto;
    }

    .body_right {
      width: 80%;
      height: 100%;
      background: #ffffff;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      padding: 17px 36px;

      .body_right_title {
        height: 50px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 550;
        color: #4c565c;
        line-height: 50px;

        ::v-deep {
          .el-button {
            border: 1px solid #497fa3;
            color: #497fa3;
            border-radius: 2px;
            float: right;
            margin-right: 8px;
            padding: 11px 26px;
            margin-top: 5px;
          }
        }
      }

      .body_right_list {
        width: 100%;
        height: calc(100% - 60px);
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #616f78;
        overflow: auto;

        .form_project_problem {
          margin-top: 16px;

          .row {
            height: 50px;

            .col {
              height: 100%;
              display: inline-block;
              vertical-align: middle;
              border: 1px #edf2f9 solid;
              padding: 10px 15px;
              line-height: 30px;
            }

            .label {
              background: #f9fcff;
            }

            .label-title {
              font-weight: bold;
              text-align: center;
              padding: 0 15px;

              span {
                display: inline-block;
                margin-top: 10px;
              }

              ::v-deep {
                .el-button {
                  border: 1px solid #ff5b5b;
                  color: #ff5b5b;
                  border-radius: 2px;
                  float: right;
                  margin-right: 8px;
                  padding: 8px 26px;
                  margin-top: 10px;
                }
              }
            }

            .label81 {
              line-height: 60px;
            }

            .label12 {
              line-height: 149px;
              //   height: 100%;
            }

            .w2 {
              width: 20%;
            }

            .w8 {
              width: 80%;
            }

            .w3 {
              width: 30%;
            }
          }

          .h8 {
            height: 80px;
          }

          .h81 {
            height: 81px;
          }

          .h12 {
            height: 169px;
          }
        }
      }
    }
  }

  ::v-deep {
    .el-menu-item:focus,
    .el-menu-item:hover,
    .el-submenu__title:focus,
    .el-submenu__title:hover {
      outline: 0;
      background-color: #fff;
      color: #409eff !important;
    }

    .el-select {
      width: 100%;
    }

    .el-input {
      width: 100%;
      height: 100%;
    }

    .el-input__inner {
      // width: 100%;
      height: 100%;
      border: none !important;
      color: #000 !important;
    }

    .el-submenu .el-menu-item {
      //   min-width: 185px;
      padding-right: 20px;
    }

    .light {
      background: #f9fcff;
      border: 1px solid #f2f6fb !important;
    }

    .el-table__row {
      // .el-table__cell {
      //     padding: 0 !important;
      // }
    }

    // .avatar-uploader{
    //     height: 100%;
    //     .el-upload{
    //         height: 100%;
    //     }
    // }
    // .el-button {
    //     background: #497FA3 !important;
    //     color: white !important;
    //     border: none !important;
    //     border-radius: 2px;
    // }
  }
}
</style>
